<template>
  <div class="message">
    <div class="message-classA">
      <ul>
        <li v-for="item in classA" v-bind:class="{ classAactive: selectClassAValue === item.id }"  @click="selectCalssA(item.id)" v-bind:key="item.title">
            <p >{{item.title}}</p>
        </li>
      </ul>
    </div>
    <div class="data-list">
       <ul>
         <li >
           <p class="data-list-tilte">浪淘沙.绿树安长亭</p>
           <div class="data-list-left">
             <div class="data-list-image">
             <img src="../../../static/images/test1.png" alt="">
             </div>
             <div>
             <p>那花花的不是落叶，而是我凋零的心。世界之心在我手中，不知道在哪</p>
             <div class="data-list-bottom">
                <div class="data-list-see">
                   <img src="../../../static/images/spot.png" alt="">
                   <span>231024124+</span>
                 </div>
                 <div class="data-thumbs-up">
                   <img src="../../../static/images/see.png" alt="">
                   <span>1241244</span>
                 </div>
                 <div class="data-list-author">
                   张明
                 </div>
             </div>
             </div>
           </div>
         </li>
         <li >
           <p class="data-list-tilte">浪淘沙.绿树安长亭</p>
           <div class="data-list-left">
             <div class="data-list-image">
             <img src="../../../static/images/test1.png" alt="">
             </div>
             <div>
             <p>那花花的不是落叶，而是我凋零的心。世界之心在我手中，不知道在哪</p>
             <div class="data-list-bottom">
                <div class="data-list-see">
                   <img src="../../../static/images/spot.png" alt="">
                   <span>231024124+</span>
                 </div>
                 <div class="data-thumbs-up">
                   <img src="../../../static/images/see.png" alt="">
                   <span>1241244</span>
                 </div>
                 <div class="data-list-author">
                   张明
                 </div>
             </div>
             </div>
           </div>
         </li>
         <li >
           <p class="data-list-tilte">浪淘沙.绿树安长亭</p>
           <div class="data-list-left">
             <div class="data-list-image">
             <img src="../../../static/images/test1.png" alt="">
             </div>
             <div>
             <p>那花花的不是落叶，而是我凋零的心。世界之心在我手中，不知道在哪</p>
             <div class="data-list-bottom">
                <div class="data-list-see">
                   <img src="../../../static/images/spot.png" alt="">
                   <span>231024124+</span>
                 </div>
                 <div class="data-thumbs-up">
                   <img src="../../../static/images/see.png" alt="">
                   <span>1241244</span>
                 </div>
                 <div class="data-list-author">
                   张明
                 </div>
             </div>
             </div>
           </div>
         </li>
         <li >
           <p class="data-list-tilte">浪淘沙.绿树安长亭</p>
           <div class="data-list-left">
             <div class="data-list-image">
             <img src="../../../static/images/test1.png" alt="">
             </div>
             <div>
             <p>那花花的不是落叶，而是我凋零的心。世界之心在我手中，不知道在哪</p>
             <div class="data-list-bottom">
                <div class="data-list-see">
                   <img src="../../../static/images/spot.png" alt="">
                   <span>231024124+</span>
                 </div>
                 <div class="data-thumbs-up">
                   <img src="../../../static/images/see.png" alt="">
                   <span>1241244</span>
                 </div>
                 <div class="data-list-author">
                   张明
                 </div>
             </div>
             </div>
           </div>
         </li>
         <li >
           <p class="data-list-tilte">浪淘沙.绿树安长亭</p>
           <div class="data-list-left">
             <div class="data-list-image">
             <img src="../../../static/images/test1.png" alt="">
             </div>
             <div>
             <p>那花花的不是落叶，而是我凋零的心。世界之心在我手中，不知道在哪</p>
             <div class="data-list-bottom">
                <div class="data-list-see">
                   <img src="../../../static/images/spot.png" alt="">
                   <span>231024124+</span>
                 </div>
                 <div class="data-thumbs-up">
                   <img src="../../../static/images/see.png" alt="">
                   <span>1241244</span>
                 </div>
                 <div class="data-list-author">
                   张明
                 </div>
             </div>
             </div>
           </div>
         </li>
         <li >
           <p class="data-list-tilte">浪淘沙.绿树安长亭</p>
           <div class="data-list-left">
             <div class="data-list-image">
             <img src="../../../static/images/test1.png" alt="">
             </div>
             <div>
             <p>那花花的不是落叶，而是我凋零的心。世界之心在我手中，不知道在哪</p>
             <div class="data-list-bottom">
                <div class="data-list-see">
                   <img src="../../../static/images/spot.png" alt="">
                   <span>231024124+</span>
                 </div>
                 <div class="data-thumbs-up">
                   <img src="../../../static/images/see.png" alt="">
                   <span>1241244</span>
                 </div>
                 <div class="data-list-author">
                   张明
                 </div>
             </div>
             </div>
           </div>
         </li>
         <li >
           <p class="data-list-tilte">浪淘沙.绿树安长亭</p>
           <div class="data-list-left">
             <div class="data-list-image">
             <img src="../../../static/images/test1.png" alt="">
             </div>
             <div>
             <p>那花花的不是落叶，而是我凋零的心。世界之心在我手中，不知道在哪</p>
             <div class="data-list-bottom">
                <div class="data-list-see">
                   <img src="../../../static/images/spot.png" alt="">
                   <span>231024124+</span>
                 </div>
                 <div class="data-thumbs-up">
                   <img src="../../../static/images/see.png" alt="">
                   <span>1241244</span>
                 </div>
                 <div class="data-list-author">
                   张明
                 </div>
             </div>
             </div>
           </div>
         </li>
         <li >
           <p class="data-list-tilte">浪淘沙.绿树安长亭</p>
           <div class="data-list-left">
             <div class="data-list-image">
             <img src="../../../static/images/test1.png" alt="">
             </div>
             <div>
             <p>那花花的不是落叶，而是我凋零的心。世界之心在我手中，不知道在哪</p>
             <div class="data-list-bottom">
                <div class="data-list-see">
                   <img src="../../../static/images/spot.png" alt="">
                   <span>231024124+</span>
                 </div>
                 <div class="data-thumbs-up">
                   <img src="../../../static/images/see.png" alt="">
                   <span>1241244</span>
                 </div>
                 <div class="data-list-author">
                   张明
                 </div>
             </div>
             </div>
           </div>
         </li>
         <li >
           <p class="data-list-tilte">浪淘沙.绿树安长亭</p>
           <div class="data-list-left">
             <div class="data-list-image">
             <img src="../../../static/images/test1.png" alt="">
             </div>
             <div>
             <p>那花花的不是落叶，而是我凋零的心。世界之心在我手中，不知道在哪</p>
             <div class="data-list-bottom">
                <div class="data-list-see">
                   <img src="../../../static/images/spot.png" alt="">
                   <span>231024124+</span>
                 </div>
                 <div class="data-thumbs-up">
                   <img src="../../../static/images/see.png" alt="">
                   <span>1241244</span>
                 </div>
                 <div class="data-list-author">
                   张明
                 </div>
             </div>
             </div>
           </div>
         </li>
         <li >
           <p class="data-list-tilte">浪淘沙.绿树安长亭</p>
           <div class="data-list-left">
             <div class="data-list-image">
             <img src="../../../static/images/test1.png" alt="">
             </div>
             <div>
             <p>那花花的不是落叶，而是我凋零的心。世界之心在我手中，不知道在哪</p>
             <div class="data-list-bottom">
                <div class="data-list-see">
                   <img src="../../../static/images/spot.png" alt="">
                   <span>231024124+</span>
                 </div>
                 <div class="data-thumbs-up">
                   <img src="../../../static/images/see.png" alt="">
                   <span>1241244</span>
                 </div>
                 <div class="data-list-author">
                   张明
                 </div>
             </div>
             </div>
           </div>
         </li>
         <li >
           <p class="data-list-tilte">浪淘沙.绿树安长亭</p>
           <div class="data-list-left">
             <div class="data-list-image">
             <img src="../../../static/images/test1.png" alt="">
             </div>
             <div>
             <p>那花花的不是落叶，而是我凋零的心。世界之心在我手中，不知道在哪</p>
             <div class="data-list-bottom">
                <div class="data-list-see">
                   <img src="../../../static/images/spot.png" alt="">
                   <span>231024124+</span>
                 </div>
                 <div class="data-thumbs-up">
                   <img src="../../../static/images/see.png" alt="">
                   <span>1241244</span>
                 </div>
                 <div class="data-list-author">
                   张明
                 </div>
             </div>
             </div>
           </div>
         </li>
        
       </ul>
    </div>
  </div>
</template>

<script>
export default {
  onload () {
    wx.showShareMenu({
      withShareTicket: true
    })
  },
  data () {
    return {
      selectClassAValue: 1,
      classA: [
        {id: 1, title: 'KOL排行'},
        {id: 2, title: '分类排行'},
        {id: 3, title: '城市排行'}]
    }
  },
  methods: {
    selectCalssA (item) {
      this.selectClassAValue = item
    }
  },
  onShareAppMessage (res) {
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123'
    }
  },
  created () {}
}
</script>

<style>
.message {
  background: #f8f8f8;
}
.message .message-classA {
   background-color: #01bcd4;
   height: 40px;
   line-height: 38px;
   color: white;
   font-weight: 200;
}
.message .message-classA ul {
  display: flex;
  justify-content: space-around;
  font-size: 16px;
}
.message .message-classA ul li {
}
.classAactive {
  border-bottom: 3px solid #ffff8d;
}
.data-list ul {
  padding-bottom: 15px;
}
.data-list ul li {
  background: white;
  padding: 10px;
  margin: 15px 15px 0 15px;
} 
.data-list ul li .data-list-left {
  display: flex;
}
.data-list ul li .data-list-left >div {

}
.data-list-left p {
  font-size: 14px;
  font-weight: 200;
}
.data-list ul li .data-list-tilte {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
}
.data-list ul li .data-list-bottom {
   display: flex;
   justify-content: space-around;
   font-size: 12px;
   margin-top: 10px;
}
.data-list ul li .data-list-image {
  width: 90px;
  height: 60px;
  margin-right: 15px;
}
.data-list ul li .data-list-image img {
  width: 90px;
  height: 60px;
}
.data-list-see img {
  width: 15px;
  height: 10px;
  margin-right: 5px;
}
.data-thumbs-up img {
  width: 15px;
  height: 10px;
  margin-right: 5px;
}
.data-list .data-list-author {
  color: #5cc54a;
}
</style>
